<template>
  <div class="bg1">
    <el-header>
      <div style="height:60px" class="bg2">
            <div  style="width:100%;height: 100%;border-radius: 100px;display:inline-block;">
              <img
                style="width:100%;height: 100%;border-radius: 100px"
                src="../assets/logo.png"
                class="image"
              >
            </div>
      <div>boke@1.0</div>
      </div>
      <el-button class="cor1" @click="loginout">注册/登出</el-button>
      </el-header>
    <el-container>
      <el-aside width="240px">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
          <el-submenu index="1">
            <template slot="title">
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/navigatorTwo">我的贴子</el-menu-item>
              <el-menu-item index="/navigatorTherr">我的相册</el-menu-item>
              <el-menu-item index="/navigator">个人信息</el-menu-item>
              <el-menu-item index="/navigatorNine">基本信息修改</el-menu-item>
              <el-menu-item index="/navigatorTen">账号管理</el-menu-item>
              <el-menu-item index="/navigatorFour">前端技术交流</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span>前端技术</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/navigatorFive">前端面试精华</el-menu-item>
              <el-menu-item index="/navigatorSix">前端练习小demo</el-menu-item>
              <el-menu-item index="/navigatorSeven">前端必备工具</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
    name: 'home',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        loginout(){
          this.$router.push('/')
        }
    },
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content:space-between}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  /* height: 100%; */
}
.el-container{
  height: 660px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  /* height: 100vh; */
}

.cor1{
  background-color: gray;
  color:white;
  margin-top: 10px;
  height: 40px;
}
.cor1:hover{
  background-color: aquamarine;
  cursor: pointer;
}
.bg2{
  display: flex;
}
</style>
